<template>
  <div class="add-friend-container">
    <div class="form">
      <h2>添加好友</h2>
      <div class="form-item">
        <label>昵称：</label>
        <input v-model="name" placeholder="请输入好友昵称" />
      </div>
      <div class="form-item">
        <label>头像链接：</label>
        <input v-model="avatar" placeholder="可使用网络图片链接" />
      </div>
      <div class="form-actions">
        <button @click="addFriend" :disabled="!name.trim()">添加</button>
        <button @click="goBack" class="back-btn">返回</button>
      </div>
      <div v-if="error" class="error">{{ error }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddFriend",
  data() {
    return {
      name: "",
      avatar: "",
      error: ""
    };
  },
  methods: {
    addFriend() {
      if (!this.name.trim()) {
        this.error = "昵称不能为空";
        return;
      }
      // 头像为空时用默认头像
      const avatar = this.avatar.trim() || "https://randomuser.me/api/portraits/lego/1.jpg";
      // 通过事件或本地存储传递数据
      this.$emit("add-friend", { name: this.name.trim(), avatar });
      // 或用 localStorage 传递
      localStorage.setItem("newFriend", JSON.stringify({ name: this.name.trim(), avatar }));
      // 跳转回聊天页
      this.$router.push("/zhc/chat");
    },
    goBack() {
      this.$router.push("/zhc/chat");
    }
  }
};
</script>

<style scoped>
.add-friend-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ededed;
}
.form {
  background: #fff;
  padding: 32px 40px;
  border-radius: 12px;
  box-shadow: 0 0 16px #e5e5e5;
  min-width: 320px;
}
h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #07c160;
}
.form-item {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}
label {
  width: 80px;
  color: #333;
}
input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  font-size: 15px;
  outline: none;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
button {
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
button:disabled {
  background: #b2b2b2;
  cursor: not-allowed;
}
.back-btn {
  background: #888;
}
.error {
  color: #e74c3c;
  margin-top: 12px;
  text-align: center;
}
</style>

